<template>
  <!-- 定义一个带有 common-layout 类名的 div 容器 -->
  <div class="common-layout">
    <!-- 使用 Element UI 的容器组件 -->
    <el-container class="head-container">
      <!-- 定义页面头部 -->
      <el-header class="head-container-header">
        <el-menu
          :default-active="activeIndex"
          class="header-menu"
          mode="horizontal"
          :ellipsis="false"
          @select="HomeHandleSelect"
        >

          <el-menu-item index="0" class="header-logo">
            <img
              style="width: 180px"
              src="@/assets/element-plus-logo.svg"
              alt="Element logo"
            />

          </el-menu-item>
          <el-menu-item index="1" class="head-item1">处理中心</el-menu-item>
          <el-sub-menu index="2" class="head-item2">
            <template #title>个人中心</template>
            <el-menu-item index="2-1" class="head-item2-1">个人信息</el-menu-item>
            <el-menu-item index="2-2" class="head-item2-2">修改密码</el-menu-item>
            <el-menu-item index="2-3" class="head-item2-3">退出登录</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>

      <!-- 嵌套一个容器组件 -->
      <el-container class="main-container">

        <!-- 定义侧边栏，宽度为 200px -->
        <el-aside width="200px">
          <!-- 侧边栏内容 -->
          <el-col :span="12" style="max-width: 100%;">
            <el-menu
            :default-active="activeIndex"
            class="main-container-aside-menu"
            @select="handleSidebarSelect"
          >

              <el-menu-item index="0">
                <el-icon><Promotion /></el-icon>
                <span>系统首页</span>
              </el-menu-item>

              <el-sub-menu index="1">
                <template #title>
                  <el-icon><School /></el-icon>
                  <span>教室管理</span>
                </template>
                  <el-menu-item index="1-1" class="main-container-aside-menu-item">教室分类</el-menu-item>
                  <el-menu-item index="1-2" class="main-container-aside-menu-item">教室列表</el-menu-item>
                  <el-menu-item index="1-3" class="main-container-aside-menu-item">教室信息</el-menu-item>
                  <el-menu-item index="1-4" class="main-container-aside-menu-item">维修信息</el-menu-item>
                  <el-menu-item index="1-5" class="main-container-aside-menu-item">数据统计</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="2">
                <template #title>
                  <el-icon><Calendar /></el-icon>
                  <span>预约管理</span>
                </template>
                  <el-menu-item index="2-1" class="main-container-aside-menu-item">预约列表</el-menu-item>
                  <el-menu-item index="2-2" class="main-container-aside-menu-item">预约信息</el-menu-item>
                  <el-menu-item index="2-3" class="main-container-aside-menu-item">预约统计</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="3">
                <template #title>
                  <el-icon><Edit /></el-icon>
                  <span>审批管理</span>
                </template>
                  <el-menu-item index="3-1" class="main-container-aside-menu-item">审批列表</el-menu-item>
                  <el-menu-item index="3-2" class="main-container-aside-menu-item">审批信息</el-menu-item>
                  <el-menu-item index="3-3" class="main-container-aside-menu-item">审批统计</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="4">
                <template #title>
                  <el-icon><Lock /></el-icon>
                  <span>维护管理</span>
                </template>
                  <el-menu-item index="4-1" class="main-container-aside-menu-item">维护列表</el-menu-item>
                  <el-menu-item index="4-2" class="main-container-aside-menu-item">维护信息</el-menu-item>
                  <el-menu-item index="4-3" class="main-container-aside-menu-item">维护统计</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="5">
                <template #title>
                  <el-icon><User /></el-icon>
                  <span>用户管理</span>
                </template>
                  <el-menu-item index="5-1" class="main-container-aside-menu-item">用户列表</el-menu-item>
                  <el-menu-item index="5-2" class="main-container-aside-menu-item">用户信息</el-menu-item>
                  <el-menu-item index="5-3" class="main-container-aside-menu-item">用户统计</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="6">
                <template #title>
                  <el-icon><Tickets /></el-icon>
                  <span>日志管理</span>
                </template>
                  <el-menu-item index="6-1" class="main-container-aside-menu-item">日志列表</el-menu-item>
                  <el-menu-item index="6-2" class="main-container-aside-menu-item">日志信息</el-menu-item>
                  <el-menu-item index="6-3" class="main-container-aside-menu-item">日志统计</el-menu-item>
              </el-sub-menu>

              <el-menu-item index="7">
                <el-icon><Setting /></el-icon>
                <span>系统设置</span>
              </el-menu-item>

            </el-menu>
          </el-col>
        </el-aside>


        <!-- 定义主内容区域 -->
        <el-main class="main-content">

          <el-card style="max-width: contents">
          </el-card>
         
          <router-view />

        </el-main>


      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';

  const handleSearchInput = (value) => {
    HomeData.search = value;
  };

  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
  } from '@element-plus/icons-vue';
import { ElSelect } from 'element-plus';
import { Search } from '@element-plus/icons-vue';

const HomeData = reactive({
    search: '',
    activeIndex:'',
    asideMenuMap:{
      '0': '/Home',
    '1-1': '/classroom/categories',
    '1-2': '/classroom/list',
    '1-3': '/classroom/information',
    '1-4': '/classroom/maintenance',
    '1-5': '/classroom/statistics',
    '2-1': '/reservation/list',
    '2-2': '/reservation/information',
    '2-3': '/reservation/statistics',
    '3-1': '/approval/list',
    '3-2': '/approval/information',
    '3-3': '/approval/statistics',
    '4-1': '/maintenance/list',
    '4-2': '/maintenance/information',
    '4-3': '/maintenance/statistics',
    '5-1': '/user/list',
    '5-2': '/user/information',
    '5-3': '/user/statistics',
    '6-1': '/log/list',
    '6-2': '/log/information',
    '6-3': '/log/statistics',
    '7-1': '/system/information',
    }
    
  })

  const router = useRouter();
  const activeIndex = ref(localStorage.getItem('activeMenuIndex') || '0');

  // 菜单事件处理方法
  const HomeHandleSelect = (key: string, keyPath: string[]) => {
    console.log('Home Header menu selected:', key, keyPath);
  };

  const HomeHandleOpen = (key: string, keyPath: string[]) => {
    console.log('Home Submenu opened:', key, keyPath);
  };

  const HomeHandleClose = (key: string, keyPath: string[]) => {
    console.log('Home Submenu closed:', key, keyPath);
  };

  const handleSidebarSelect = (key: string) => {
    const path = HomeData.asideMenuMap[key];
    if (path) {
      router.push(path);
      localStorage.setItem('activeMenuIndex', key);
      activeIndex.value = key;
    }
  };

  const HomeHandleMenuSelect = (key: string, keyPath: string[]) => {
    console.log('Home Side menu selected:', key, keyPath);
    const routePath = HomeData.asideMenuMap[key];
    if (routePath) {
      router.push(routePath);
      activeIndex.value = key;
      localStorage.setItem('activeMenuIndex', key);
    }
  };

  // 修复图标导入
  import { Promotion, School, Calendar, Edit, Lock, User, Tickets } from '@element-plus/icons-vue';
import request from '@/utils/request';

  
</script>

<style scoped>

  .header-logo{
    width:180px;
  }

  .el-menu--horizontal > .el-menu-item:nth-child(1) {
    margin-right: auto;
  }

  .main-container-aside-menu {
    padding-left: 20px;
    
  }

  .main-container-aside-menu-item {
    margin-left: 20px;
  }

  .main{
    height: auto;
  }

</style>